<template>
  <a-menu :selectedKeys="selectedKeys" :openKeys="openKeys" mode="inline" class="menus">
    <template v-for="item in arrMenu">
      <a-menu-item v-if="!item.children" :key="item.key" @click="menuTag(item.path)">
        <span>{{item.title}}</span>
      </a-menu-item>
      <a-sub-menu v-else :key="item.key">
        <span slot="title">
          <span>{{ item.title }}</span>
        </span>
        <template v-for="itemChild in item.children">
          <a-menu-item :key="itemChild.key" @click="menuTag(itemChild.path)">
            <span>{{ itemChild.title }}</span>
            <span 
              v-if="itemChild.key == 'autonym' && $store.state.rzstatus != ''" 
              style="color: red;">{{$store.state.rzstatus}}</span>
          </a-menu-item>
        </template>
      </a-sub-menu>
    </template>
  </a-menu>
</template>
<script>
import { GET_REAL_NAME } from "./server";
export default {
  data() {
    return {
      arrConsult: [
        {
          key: "1",
          title: "帮助中心",
          path: "",
          children: [
            { key: "help", title: "用户帮助", path: "/consult/help" },
            { key: "feedback", title: "意见反馈", path: "/consult/feedback" }
          ]
        }
      ],
      arrMine: [
        {
          key: "1",
          title: "个人中心",
          path: "/mine"
        },
        {
          key: "2",
          title: "我是买家",
          path: "",
          children: [
            { key: "buylist", title: "我买到的", path: "/mine/buylist" },
            { key: "collect", title: "我收藏的", path: "/mine/collect" }
          ]
        },
        {
          key: "3",
          title: "我是卖家",
          path: "",
          children: [
            { key: "release", title: "我发布的", path: "/mine/release" },
            { key: "sell", title: "我卖出的", path: "/mine/sell" }
          ]
        },
        {
          key: "4",
          title: "我的钱包",
          path: "",
          children: [
            { key: "account", title: "余额提现", path: "/mine/account" },
            { key: "balance", title: "账户明细", path: "/mine/balance" },
            { key: "recharge", title: "我要充值", path: "/mine/recharge" },
            { key: "autonym", title: "实名认证", path: "/mine/autonym" },
          ]
        },
        {
          key: "5",
          title: "我的消息",
          path: "/mine/notice"
        }
      ],
    };
  },
  created() {
    let r = this.$route.path.split("/")[1];
    if (r == "mine") {
      GET_REAL_NAME({
        type: 1
      }).then(res => {
        let auth = res.data
        this.$store.commit('rzstatus', auth)
      });
    }
  },
  methods: {
    menuTag(path) {
      this.$router.push(path);
    }
  },
  computed: {
    arrMenu() {
      let r = this.$route.path.split("/")[1];
      if (r == "consult") {
        return this.arrConsult;
      }
      if (r == "mine") {
        return this.arrMine;
      }
    },
    openKeys() {
      let r = this.$route.path.split("/")[1];
      let arr = [];
      let defaultArr = [];
      if (r == "consult") {
        defaultArr = this.arrConsult;
      }
      if (r == "mine") {
        defaultArr = this.arrMine;
      }
      defaultArr.forEach(ele => {
        arr.push(ele.key);
      });
      return arr;
    },
    selectedKeys() {
      let r = this.$route.path.split("/")[2] || "1";
      return [r];
    }
  }
};
</script>
<style lang="less" scoped>
.menus {
  padding:  40px 30px 0 30px;
  width: 170px;
  border: 3px solid #0084ff;;
  margin-left: 30px;
  margin-right: 20px;
  border-radius: 6px;
  & > li {
    margin-bottom: 32px !important;

  }
  & > li:nth-child(1) {
    font-size: 16px;
  }
  & > li:nth-child(4) {
    font-size: 16px;
  }
  & > li:nth-child(5) {
    font-size: 16px;
  }
  &/deep/.ant-menu-submenu-title {
    font-size: 12px;
  }
  &/deep/.ant-menu-item {
    font-size: 12px;
  }
  &/deep/.ant-menu-submenu-arrow {
    opacity: 0;
  }
  &/deep/.ant-menu-item-selected {
    background: #fff;
  }
  &/deep/.ant-menu-submenu-title {
    font-size: 16px;
    padding: 0 !important;
    height: auto !important;
    line-height: 16px;
  }
  &/deep/.ant-menu-item {
    width: 110px;
    height: auto !important;
    padding: 2px 0 !important;
    white-space: pre-wrap;
    overflow: auto;
    line-height: 16px;
    margin-bottom: 10px;
    // margin-right: 0;
    &::after {
      border: 0;
    }
  }
}
</style>
